<template>
  <Modal @close="$emit('close')" class="com-modal-action-sheet">
    <div class="com-actoin-sheet">
      <slot name="title">
        <div class="header">
          <div class="title" v-if="title">
            <span>{{title}}</span>
            <div class="title-tip" v-if="tip">{{tip}}</div>
          </div>
          <slot name="right"></slot>
        </div>
      </slot>
      <slot name="content">
        <ul class="list">
          <li class="item" v-for="(item,index) in list" :key="index" @click="select(item)">
            <slot :item="item">
              <div class="tit">{{item.label}}</div>
              <i class="css-arrow-right" :class="{'on':value == item.value}" v-if="item.type=='link'"></i>
              <span v-else-if="item.disabled">{{item.disabledText}}</span>
              <i v-else class="ic" :class="{'on':item.value === selected}"></i>
            </slot>
          </li>
        </ul>
      </slot>
    </div>
  </Modal>
</template>

<script>
/**
 * list 格式
 * {
 *  label:'xxx',
 *  value:1,
 * }
 */
import Modal from '~/components/Modal'
export default {
  components:{
    Modal,
  },
  props:{
    title:{
      type:String,
      default:'',
    },
    list:{
      type:Array,
      default:[]
    },
    tip:String, //提示语句
    value:{}
  },
  data(){
    return {
      selected:'',
    }
  },
  mounted(){
    this.selected = this.value;
  },
  methods:{
    select(item){
      if(item.disabled) return false;
      if(item.type === 'link'){
        this.$emit('select',item)
        this.$router.push(item.link);
        return false;
      }
      this.selected = item.value;
      setTimeout(()=>{
        this.$emit('select',item)
        this.$emit('close')
      },100)

    }
  }

}
</script>

<style lang="less" scoped>
.com-modal-action-sheet {
  display: flex;
  align-items: flex-end;

  .com-actoin-sheet {
    max-height: 80%;
    width:100%;
    display: flex;
    flex-direction: column;
    background-color:#fff;
    overflow: hidden;
    .header {
      display: flex;
      align-items: center;
      justify-content: space-around;
      border-bottom:1px solid #ededf0;
      min-height:112px;
      padding:40px 32px;
      width:100%;


    }
    .title {
      display: flex;
      flex:1;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      font-size:32px;
      color:#666;
      span {
        .text-ellipsis();
      }
      .title-tip {
        margin-top:8px;
        font-size:22px;
        line-height: 1.2;
        color:rgb(211,155,0);
      }
    }

    .list {
      padding:0 30px;
      flex:1;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }

    .item {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width:100%;
      height:114px;
      & + .item {
        border-top:1px solid #ededf0;
      }
      .tit {
        flex:1;
        font-size:32px;
        color:#292929;
        .text-ellipsis();
      }
      .ic {
        margin-left:10px;
        display: flex;
        align-items: center;
        justify-content: center;
        width:36px;
        height:36px;
        border-radius: 50%;
        border:1px solid #c1c5cf;
        &::after {
          content:'';
          width:16px;
          height:16px;
          border-radius: 50%;
        }

        &.on {
          border-color:#2086f9;
          &::after {
            background-color:#2086f9;
          }
        }
      }
      span {
        font-size:24px;
        color:#999;
      }
    }
  }
}
</style>
